import React, { Component } from 'react'
import { Input, Form, Select, Upload, Modal, Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons';
import { SPIav,Complint} from '../../utils/api';

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12 },
};

export const areas = [
    {
        title: "妇科",
        value: "1",
    },
    {
        title: "儿科",
        value: "2",
    },
    {
        title: "助产科",
        value: "3",
    },
    {
        title: "急诊科",
        value: "4",
    },
    {
        title: "精神科",
        value: "5",
    },
];
export default class thressOne extends Component {
    state = {
        ava: null,
        previewVisible: false,
        previewImage: '',
        previewTitle: '',
        fileList: [],
    }
    handleCancel = () => this.setState({ previewVisible: false });
    // 设置这个可以阻止onChange 重复上传
    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
    };
    handleChange = ({ fileList }) => {
        this.fileChange(fileList[0].originFileObj)
        this.setState({ fileList })
    }
    //上传图像
    fileChange = (paper) => {
        const file = paper
        const data = new FormData();
        data.append("avatar", file);
        SPIav(data).then(res => {
            if (res.type) {
                //  此处逻辑较为复杂,谨慎处理
                this.setState({
                    ava: res.avatar.replace(/public/, "http://localhost:3000")
                })
            }
        })
    }
    render() {
        const { previewVisible, previewImage, fileList, previewTitle } = this.state;
        const uploadButton = (
            <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        // 提交投诉信息
        let onFinish = (value) => {
            value.imgname = []
            for (let i in fileList) {
                value.imgname.push(fileList[i].name)
            }
            Complint(value).then((res)=>{
                console.log(res)
            })
        };
        return (
            <div>
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="被投诉人姓名"
                        name="username"
                        rules={[
                            { required: true, message: '请输入人员姓名' }
                        ]}
                    >
                        <Input
                            placeholder="请输入人员姓名"
                        />
                    </Form.Item>
                    <Form.Item
                        label="科室"
                        name="office"
                        rules={[{ required: true, message: "请选择科室" }]}
                    >
                        <Select placeholder="请选择">
                            {areas.map((item, i) => {
                                return (
                                    <Select.Option value={item.value} key={i}>
                                        {" "}
                                        {item.title}{" "}
                                    </Select.Option>
                                );
                            })}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="投诉内容"
                        name="text"
                    >
                        <Input.TextArea
                            style={{ height: "90px" }}
                            placeholder="请如实填写"
                        />
                    </Form.Item>
                    {/* 图像上传 */}
                    <Form.Item label="图片">
                        <Upload
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            listType="picture-card"
                            fileList={fileList}
                            onPreview={this.handlePreview} // 点击图片缩略图，进行预览
                            customRequest={this.Request}
                            onChange={this.handleChange} // 每次上传图片时，都会触发这个方法
                            showUploadList={{ showRemoveIcon: false }}
                        >
                            {fileList.length >= 8 ? null : uploadButton}
                        </Upload>
                        <Modal
                            visible={previewVisible}
                            title={previewTitle}
                            footer={null}
                            onCancel={this.handleCancel}
                        >
                            <img alt="example" style={{ width: '100%' }} src={previewImage} />
                        </Modal>
                    </Form.Item>



                    <Form.Item
                        label="联系方式"
                        name="phone"
                        rules={[
                            { required: true, message: '请输入联系方式' }
                        ]}
                    >
                        <Input
                            placeholder="请输入可拨打的电话"
                        />
                    </Form.Item>
                    <Form.Item
                        {...layout}
                    >
                        <Button type="primary" onClick={this.forMycg} htmlType="submit" >
                            上传投诉
                      </Button>
                    </Form.Item>
                </Form>

            </div >

        )
    }
}
